<template>
  <div class="login">
    <div class="contianer">
      <div class="login-img">
        源生态网络科技有限公司
      </div>
      <el-form
        class="elfrom"
        :model="loginForm"
        ref="loginForm"
        label-width="80px"
      >
        <el-form-item label="登录账户" prop="name">
          <el-input v-model="loginFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="loginFrom.password"></el-input>
        </el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <!-- <button class="elbutton" type="primary" @click="login()">登录</button> -->
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {},
  data () {
    return {
      loginFrom: {
        name: '',
        password: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入登录账户', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created () {},
  methods: {
    // 登录到主页
    login () {
      this.$router.push('./home')
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  position: fixed;
  border: 1px solid green;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('../assets/img/bgc.jpg') no-repeat;
  background-size: cover;
  .contianer {
    height: 400px;
    width: 400px;
    border: 1px solid red;
    border-radius: 12px;
    .elfrom {
      margin-top: 30px;
    }
    .elbutton {
      margin-top: 50px;
      width: 300px;
      margin-left: 50px;
    }
    .login-img {
      height: 40px;
      border-radius: 12px 12px 0 0;
      font-size: 24px;
      line-height: 40px;
      text-align: center;
      padding: 20px 0 20px 0;
    }
  }
}
</style>
